<template>
	<default-header-page-layout ref="page" title="单据入库">
		<view class="page-frame with-action-user-row" :style="{height:pageBodyHeight+'px'}" v-if="pageBodyHeight">
			<action-user-row />
			<view class="with-action-user-row-page-content">
				<scan-input-form-item :msgType='msgType' class="forma-item" label="托盘号" v-model="form.containerCode "
					:msg="msg" @search="onSearchContainter" @clear="onClearContainter" />
				<scan-input-form-item class="forma-item" label="单据号" v-model="form.NO" @search="onSearchNO"
					@clear="onClearNO" />
				<!--  -->

				<view v-if="true">
					<view v-for="(item,index) in noData" :key="index">
						<bar-content @checkChange="checkChange" :index="index" :content="item"></bar-content>
					</view>

				</view>
			</view>


		</view>
		<template v-slot:footer>
			<view class="bottom-btns-row">
				<view style="margin-right:10rpx" class="btn-frame">
					<u-button :disabled="!bindIn" type="primary" text="组 盘" @click="inBind">
					</u-button>
				</view>
				<view class="btn-frame">
					<u-button :disabled="!Boolean(contaninerData.containerCode)" type="primary" text="入 库"
						@click="onConfirm">
					</u-button>
				</view>
			</view>
		</template>
	</default-header-page-layout>
</template>

<script>
	import DefaultHeaderPageLayout from '@/components/DefaultHeaderPageLayout.vue'
	import ActionUserRow from '@/components/ActionUserRow.vue'
	import ScanInputFormItem from '@/components/ScanInputFormItem.vue'
	import EasySelectFormItem from '@/components/EasySelectFormItem.vue'
	import EasyPicker from '@/components/EasyPicker.vue'
	import {
		GetContainer,
		GetMaterialPad,
		GroupDisk,
		PdaInWarehouse
	} from '@/api/emptyIn.js'
	import {
		getSysEnumData
	} from '@/api/common.js'
	let initInterVal = null;

	import barContent from './modules/barContent.vue'

	export default {
		name: 'emptyInPage',
		components: {
			barContent,
			DefaultHeaderPageLayout,
			ActionUserRow,
			ScanInputFormItem,
			EasySelectFormItem,
			EasyPicker
		},
		data() {
			return {
				pageBodyHeight: 0,
				form: {
					containerCode: '',
					NO: ''
				},
				msg: '',
				msgType:'info',
				contaninerData: {},
				wmsMaterials: [],
				noData: [],
				ContainerStatus: [],
				
			}
		},
		computed: {
			bindIn() {
				const wmsContainer = this.contaninerData.wmsContainer || {}
				const res = this.noData.filter(item => item.checked == true)
				return Boolean(wmsContainer.containerCode) && res.length > 0 && (wmsContainer.containerStatus == 1 ||
					wmsContainer.containerStatus == 2)
			}
		},
		methods: {
			// 获取托盘信息
			onSearchContainter(containerCode) {
				if (containerCode) {
					this.form.containerCode = containerCode
				}
				const param = {
					containerCode: this.form.containerCode
				}
				GetContainer(param).then(res => {
					if (Boolean(res.data)) {
						this.contaninerData = res.data
							const containterDetail = this.contaninerData.wmsContainer || {}
							this.wmsMaterials=this.contaninerData.wmsMaterials||[]
							this.noData.forEach(item=>{
							const result=this.wmsMaterials.filter(obj => obj.materialName == item.materialname)
							if(result.length>0) {
								this.$set(item, 'checked', true)
								this.$set(item,'qty',result[0].bindQuantity)
							}else {
								this.$set(item, 'checked', false)		
							}
							
							})
							const result = this.ContainerStatus.filter(item => item.code == containterDetail
								.containerStatus)
							var containerStatusName = ''
							if (result.length > 0) {
								containerStatusName = result[0].value
							}
							this.msgType='info'
							this.msg =
								`尺寸：${containterDetail.specLength+'*'+containterDetail.specWidth+'*'+containterDetail.specHeight}，状态：${containerStatusName}`
					}else {
						this.msg =res.message
						this.msgType='error'
					}
				})
			},
			// 清除托盘信息
			onClearContainter() {
				this.form.containerCode = ''
				this.contaninerData = {}
				this.wmsMaterials = []
				this.noData.forEach(item => {
					item.checked = false
					item.qty = item.qtyCount
				})
				this.msg = ''
				this.msgType='info'
			},
			// 获取单据信息
			onSearchNO(NO) {
				if (NO) {
					this.form.NO = NO
				}
				const param = {
					NO: this.form.NO
				}
				GetMaterialPad(param).then(res => {
					console.log(res);
					if (Boolean(res.data)) {
						this.noData = res.data.rows || []
						this.noData.forEach(item => {
							item.qtyCount = item.qty
							const result=this.wmsMaterials.filter(obj => obj.materialName == item.materialname) 
							if(result.length>0) {
								this.$set(item, 'checked', true)
								this.$set(item,'qty',result[0].bindQuantity)
							}else {
								this.$set(item, 'checked', false)		
							}
						})
						console.log(this.noData);
					} else {
						this.$modal(res.message)
					}

				})
			},
			// 清除单据号
			onClearNO() {
				this.form.NO = ''
				this.noData = []
			},
			// 组盘
			inBind() {
				uni.showModal({
					title: '组盘确认',
					content: '确定执行组盘操作吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确定',
					success: async (type) => {
						let {
							confirm,
							cancel
						} = type
						if (confirm) {
							const res = this.noData.filter(item => item.checked)
							let data = {
								containerCode: this.form.containerCode,
								wmsMaterials: res
							}
							try {
								await GroupDisk(data)
								uni.showToast({
									title: '组盘成功',
									success: () => {
										this.onSearchContainter()
										this.onClearNO()
									}
								})

							} catch (e) {
								//TODO handle the exception
								console.log(e);
							}
						}
					}
				})
			},
			// 入库
			async onConfirm() {
				uni.showModal({
					title: '入库确认',
					content: '确定执行入库操作吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确定',
					success: async (type) => {
						let {
							confirm,
							cancel
						} = type
						if (confirm) {
							let data = {
								containerCode: this.form.containerCode,
								wmsMaterials: []
							}
							const res = this.noData.filter(item => item.checked)
							if(res.length<1) {
								this.wmsMaterials.forEach(item=>{
									item.qty=item.bindQuantity
									item.materialname=item.materialName
								})
								data.wmsMaterials=this.wmsMaterials
							}else {
								data.wmsMaterials=res
							}
							console.log(data,'data');
							
							try {
								await PdaInWarehouse(data)
								uni.showToast({
									title: '入库成功',
									success: () => {
										this.onClearContainter()
										this.onClearNO()
									}
								})

							} catch (e) {
								//TODO handle the exception
								console.log(e);
							}
						}
					}
				})

				// this.onClearContainter()
				// this.onClearNO()
			},
			// 获取枚举信息
			async getSysEnumData() {
				try {
					let {
						data
					} = await getSysEnumData({
						enumName: 'ContainerStatus'
					})
					this.ContainerStatus = data
				} catch (e) {
					//TODO handle the exception
					console.log(e);
				}
			},
			checkChange(item) {
				item.checked = !item.checked
			},
			/* 页面初始化获取页面body高度的定时器 */
			startInitInterval(callback) {
				initInterVal = setInterval(() => {
					if (this.pageBodyHeight) {
						this.clearInitInterval()
						callback && callback()
					} else {
						this.pageBodyHeight = this.$refs.page.getBodyHeight()
					}
				}, 200)
			},
			/* 清除定时器 */
			clearInitInterval() {
				try {
					clearInterval(initInterVal)
					initInterVal = null
				} catch (e) {
					//TODO handle the exception
				}
			}
		},
		onReady() {
			this.startInitInterval(() => {
				/* 页面初始化后需要执行的代码在这边调用 */
				// this.getLinesOptions()
				this.getSysEnumData()
				// this.selectOptions.models = getDicList(this.$store,'assemble_taskmodel')
			})
		},
		onUnload() {
			this.clearInitInterval()
		}
	}
</script>

<style scoped lang="scss">
	.forma-item {
		margin-bottom: 24rpx;
	}

	.only-watch-container {
		background-color: #D0DDD8;
		min-height: 90rpx;
		display: flex;

		&>.label {
			color: $u-tips-color;
			font-size: 32rpx;
			flex-shrink: 0;
			padding-left: 20rpx;
			padding-top: 22rpx;
		}

		&>.content {
			width: 1px;
			flex-grow: 1;
			display: flex;
			align-items: center;
			font-size: 30rpx;
			padding: 8rpx 0;
		}
	}

	.bottom-btns-row {
		display: flex;
		padding: 10rpx 20rpx;
		background-color: #fff;

		.btn-frame {
			width: 1%;
			box-sizing: border-box;
			flex-grow: 1;
		}
	}
</style>